/**
 * 路由页面组件与一般组件的区别：
 *
 *    1. 路由页面组件如何理解：
 *      某个组件是配置到 <Route /> 的 component 属性上的话，那它就是一个路由页面组件
 *    2. 一般组件如何理解：
 *      除了路由页面组件之外，其他普通调用组件的方式都是一般组件。
 *
 *    路由页面组件会自动接收到一些 prop。
 *      history
 *      location
 *      match
 *
 * 这些 prop 有什么作用：
 *   1. history - 里面有一些函数, 能实现编程式导航（用JS来控制路由跳转）
 *        go()、
 *          go(1)     前进一下
 *          go(-1)    后退一下
 *        goBack()、    后退一下
 *        goForward()   前进一下
 *        push()        已增加历史记录的方式来跳转路由
 *        replace()     已替换当前记录的方式来跳转路由
 *   2. location - 当前匹配的路由信息对象。提供一些属性，可用于获取url参数
 *        search - ?号传递的参数字符串
 *        state - 跳转路由时，传递过来的 state 参数
 *
 *   3. match - 用于获取动态路由参数 params 的
 *        params  - 获取到动态路由参数
 *
 */

import { FC, useState } from "react";
import { Route, Link } from "react-router-dom";

type IButtonProps = {
  onClick: () => void;
};
const Button: FC<IButtonProps> = ({ onClick }) => {
  return (
    <div>
      <button onClick={onClick}>按钮</button>
    </div>
  );
};

function Home() {
  return (
    <div>
      <h4>Home</h4>
    </div>
  );
}

function User() {
  return (
    <div>
      <h4>User</h4>
    </div>
  );
}

function App() {
  function handleClick() {
    console.log("handleClick");
  }
  return (
    <div>
      <h1>App</h1>
      <Button onClick={() => handleClick}></Button>

      {/* 
        to 属性
            1. 字符串
            2. 对象的写法
      */}
      <Link
        to={{
          pathname: "/home",
          state: {
            a: 1,
            b: 2,
          },
        }}
      >
        跳转到 /home{" "}
      </Link>
      <br />
      <Link to="/user/1/张三">用户1-张三</Link>
      <br />
      <Link to="/user/2/李四">用户2-李四</Link>
      <hr />
      <Route path="/home" component={Home} />
      <Route path="/user/:id/:name" component={User} />
    </div>
  );
}

export default App;
